<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>查看食谱</title>
		<link rel="stylesheet" href="css/best_recipe.css" />
		<link rel="stylesheet" href="css/view_recipes.css" />
	</head>

	<body>
		<header>
			<div class="header">
				<span class="title">查看食谱</span>
				<span class="search"></span>
			</div>
		</header>
		<div class="top"></div>
		<div class="cooker">
			<div class="cooker_news">
				<div class="cooker_into">
					<span class="font_id">ID</span>
					<span class="cooker_name">张某某</span>
				</div>
				<div class="cooker_eva">
					<span class="eva_title">成长经验</span>
					<div class="eva_group">
						<span class="eva_icon active"></span>
						<span class="eva_icon active"></span>
						<span class="eva_icon"></span>
						<span class="eva_icon"></span>
						<span class="eva_icon"></span>
						<span class="eva_icon"></span>
					</div>
				</div>
				<div class="blank"></div>
				<div class="cooker_img"></div>
			</div>
			<div class="blank"></div>
		</div>
		<div class="intro_recipes">
			<div class="intro_recp">
				<div class="intro_name">疙瘩汤</div>
				<div class="intro_cont">
					<div class="intro_left">
						<div style="padding: 7px 0;border-right: 1px solid #999999;width: 95%;">
							<span>by:<span class="name">李某某</span></span>
						</div>
					</div>
					<div class="intro_middle">
						<span>食谱分类:<span class="rec_type">汤、粥</span></span>
					</div>
					<div class="intro_right">
						<a href="recipe_mine.html">
							快速访问李某某的食谱天地
						    <span class="go"></span>
						</a>
					</div>
					<div class="blank"></div>
				</div>
			</div>
			<div class="panel">
				<img src="images/best_recipe/rec_image1.png" alt="食谱图"/>
				<div class="panel_shoucang">
					<a href="javascript:void(0)">
						<span class="shoucang no_shoucang"></span>
						<span class="caozuo">收藏</span>
					</a>
				</div>
				<div class="panel_dianzan">
					<a href="javascript:void(0)">
						<span class="dianzan"></span>
						<span class="caozuo"><b>点赞</b><i class="add_1">+1</i></span>
					</a>
				</div>	
				<div class="panel_bottom">
					<div class="bottom_inner">
						<span class="dianzan_number">1563人点赞</span>
					    <span class="shoucang_number">589人收藏</span>
					</div>
				</div>	
			</div>
			<div class="rec_bottom">
				<b>食材</b>
				<ul class="ingredients">
					<li>845克水</li>
					<li>100克面粉</li>
					<li>150克番茄切块</li>
					<li>10克油</li>
				</ul>
				<span class="line_green"></span>
			</div>
			<div class="rec_bottom">
				<b>食材</b>
				<ul class="ingredients">
					<li>845克水</li>
					<li>100克面粉</li>
					<li>150克番茄切块</li>
					<li>10克油</li>
				</ul>
				<span class="line_green"></span>
			</div>
			<div class="panel">
				<img src="images/best_recipe/rec_image1.png" alt="食谱图"/>
			</div>
			<div class="rec_bottom">
				<b>食材</b>
				<ul class="ingredients">
					<li>845克水</li>
					<li>100克面粉</li>
					<li>150克番茄切块</li>
					<li>10克油</li>
				</ul>
				<span class="line_green"></span>
			</div>
		</div>
		<div class="footer_help"></div>
		<footer>
			<div class="footer_container">
				<div class="footer_item">
					<div class="item_inner">
						<a href="jacascript:void(0)">
							<span class="home_icon"></span>
							<span class="footer_name">主页</span>
						</a>
					</div>
				</div>
				<div class="footer_item">
					<div class="item_inner2">
						<a href="javascript:void(0)">
							<span class="add_icon"></span>
						</a>
					</div>
				</div>
				<div class="footer_item">
					<div class="item_inner3">
						<a href="jacascript:void(0)">
							<span class="mine_icon"></span>
							<span class="footer_name">我的食谱</span>
						</a>
					</div>
				</div>
				<div class="blank"></div>
			</div>
		</footer>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script>
			$(function(){
				/*点击点赞按钮*/
				$('.panel_dianzan').click(function(){
					$('.add_1').addClass('click_add');
					$('.panel_dianzan .caozuo b').html('已赞');
				})
				
				$('.panel_shoucang .shoucang').click(function(){
					if($(this).hasClass('no_shoucang')){
						$(this).removeClass('no_shoucang').addClass('ha_shoucang');
					}else{
						alert('已收藏');
					}
				})
			})
		</script>
	</body>

</html>